<template>
  <div class="question-container">
    <el-card>
      <!-- 新增按钮 -->
      <!-- 按钮 -->
      <div class="btn_wrapper">
        <el-button
          icon="el-icon-edit"
          @click="$router.push('new')"
          type="success"
          size="small"
          >新增试题</el-button
        >
      </div>

      <!-- form表单 -->
      <el-form label-width="80px" size="small" class="formType">
        <el-row :gutter="25">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                @change="changeSubjec"
                placeholder="请选择"
                style="width: 100%"
                v-model="requestParams.subjectID"
              >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="requestParams.catalogID"
              >
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="requestParams.tags"
              >
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="requestParams.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="requestParams.questionType"
              >
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="requestParams.difficulty"
              >
                <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="requestParams.direction"
              >
                <el-option
                  v-for="item in orientation"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="requestParams.creatorID"
              >
                <el-option
                  v-for="item in setUser"
                  :key="item.id"
                  :value="item.id"
                  :label="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="requestParams.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简介">
              <el-input v-model="requestParams.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-row>
                <!-- 城市 -->
                <el-col :span="12">
                  <el-select
                    @change="handleCity"
                    placeholder="请选择"
                    style="width: 95%"
                    v-model="requestParams.province"
                  >
                    <el-option
                      v-for="item in province"
                      :key="item"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-col>
                <!-- 地区 -->
                <el-col :span="12">
                  <el-select
                    placeholder="请选择"
                    style="width: 100%"
                    v-model="requestParams.city"
                  >
                    <el-option
                      v-for="item in region"
                      :key="item"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clean()">清除</el-button>
              <el-button @click="search()" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 标签页 -->
      <el-tabs
        v-model="requestParams.chkState"
        type="card"
        @tab-click="changeTab"
      >
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>

      <!-- 数据提示 -->
      <el-alert
        :title="`数据一共多少 ${total} 条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="150"
          :formatter="formatter"
        ></el-table-column>
        <el-table-column label="题干" width="350">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="200">
          <template #default="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="150"
          :formatter="difficulty"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="150"
        ></el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="150">
          <template #default="{ row }">
            {{ row.chkState | state_chk }}
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="150"
        ></el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="150">
          <template #default="{ row }">
            {{ row | stte_pub }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="openPreviewDialog(row.id, row)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="openCheckDialog(row)"
              :disabled="row.chkState !== 0"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="$router.push(`new?id=${row.id}`)"
              :disabled="row.publishState === 1"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="togglePublish(row)">{{
              row.publishState === 1 ? '下架' : '上架'
            }}</el-button>
            <el-button
              type="text"
              size="small"
              @click="delQuestion(row)"
              :disabled="row.publishState === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页
          page-size   每页显示条目个数
          current-page  当前页数
         -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestParams.page"
        :page-sizes="[2, 4, 6, 10]"
        :page-size="requestParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 预览页面 -->
    <QuestionsPreview
      ref="questionPreview"
      :dialogVisible.sync="dialogVisible"
      :data="questionInfo"
    ></QuestionsPreview>

    <!-- 审核对话框 -->
    <QuestionsCheck
      :dialogChkState.sync="dialogChkState"
      :questionInfo="questionInfo"
      @updateList="getList()"
    ></QuestionsCheck>
  </div>
</template>

<script>
import {
  choice,
  choicePublish,
  remove as questionDel
} from '../../api/hmmm/questions'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview'
import QuestionsCheck from '../components/questions-check'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { simple as tagList } from '@/api/hmmm/tags'
import { simple as userList } from '@/api/base/users'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'

export default {
  name: 'questionsChoice',
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  data () {
    return {
      activeName: 'first',
      tableData: [], // 表格数据
      total: 0, // 分页总数
      dialogVisible: false, // 预览对话框的布尔值
      questionInfo: {}, // 预览对话框的渲染内容
      dialogChkState: false, // 审核对话框布尔值
      // 响应数据
      requestParams: {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        page: 1, // 页码
        pagesize: 2, // 每页显示的条数
        chkState: 'all' // 审核状态
      },
      requestParams1: {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        page: 1, // 页码
        pagesize: 2, // 每页显示的条数
        chkState: 'all' // 审核状态
      },
      // 学科列表数据
      subjectOptions: [],
      // 二级目录
      directoryOptions: [],
      // 标签列表
      tagOptions: [],
      // 试题类型，有引入的值questionType
      questionTypeOptions: questionType,
      // 难度 difficulty
      diffOptions: difficulty,
      // 方向
      orientation: direction,
      // 录入人
      setUser: [],
      // 省份
      province: getCity(),
      // 地区
      region: getArea
    }
  },
  // 过滤器
  filters: {
    // 审核状态
    state_chk (val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    stte_pub (row) {
      // console.log(row.publishState)
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    }
  },
  created () {
    // 获取学科列表
    this.getInput()
    // this.getListBackups()
    // 用户
    this.getUser()
    this.getList()
  },
  methods: {
    // 学科列表
    async getInput () {
      const { data } = await subjectList()
      console.log(data)
      this.subjectOptions = data
    },
    // 学科的change事件，要筛选出二级事件
    async changeSubjec (subjectID) {
      this.requestParams.catalogID = null
      this.requestParams.tags = null
      console.log(subjectID)
      if (subjectID) {
        // 二级目录发送请求
        const { data } = await directoryList({ subjectID })
        // 得到二级目录
        // console.log(data)
        this.directoryOptions = data

        // 得到标签列表
        const { data: targen } = await tagList({ subjectID })
        console.log(targen)
        this.tagOptions = targen
      } else {
        this.directoryOptions = []
        this.tagOptions = []
      }
    },
    // 用户列表
    async getUser () {
      const { data } = await userList()
      // console.log(data)
      this.setUser = data
    },
    // 筛选出城市的二级城市
    handleCity (cityName) {
      // 地区选中的数据清空
      this.requestParams.city = null
      // 获取前城市的值赋值 地区
      // console.log(cityName)
      this.region = getArea(cityName)
      // console.log(this.region)
    },
    // 清空form 表单
    clean () {
      // 或者直接赋值为空
      for (const k in this.requestParams) {
        if (k !== 'page' && k !== 'pagesize') this.requestParams[k] = null
      }
    },
    search () {
      this.requestParams.page = 1
      this.requestParams1 = this.requestParams
      this.getList()
    },
    // 题型筛选
    // 格式化聘用形式的方法 row表示的是当前行的数据, column表示的是当前列的信息, cellValue是当前单元格的信息, index下标
    formatter (row, column, cellValue, index) {
      // console.log(row)
      const obj = questionType.find((item) => item.value === +row.questionType)
      return obj ? obj.label : '未知'
    },
    // 难度转换
    difficulty (row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value === +row.difficulty)
      return obj ? obj.label : '未知'
    },

    // 表格数据获取列表
    async getList () {
      const params = { ...this.requestParams }
      if (params.chkState === 'all') params.chkState = null
      const { data } = await choice(params)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 备份
    async getListBackups (params) {
      const paramson = params
      if (paramson.chkState === 'all') paramson.chkState = null
      const { data } = await choice(paramson)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // tab切换
    changeTab () {
      this.requestParams.page = 1
      this.getList()
    },
    // 每页条数发生变化
    handleSizeChange (newsize) {
      this.requestParams1.pagesize = newsize
      this.getListBackups({ ...this.requestParams1 })
    },
    // 页码发生变化
    handleCurrentChange (newPage) {
      this.requestParams1.page = newPage
      this.getListBackups({ ...this.requestParams1 })
    },
    // 预览弹框
    openPreviewDialog (id, row) {
      console.log(id)
      this.questionInfo = row
      this.dialogVisible = true
      // 父组件去操作open 获取值
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },
    // 审核弹框
    openCheckDialog (row) {
      console.log(row.id)
      this.questionInfo = row
      this.dialogChkState = true
    },
    // 上架-下架
    async togglePublish (row) {
      console.log(row)
      await this.$confirm(
        `你确定要${row.publishState === 1 ? '下架' : '上架'}`,
        '提示',
        {
          type: 'warning'
        }
      ).catch(() => {})
      // 得到上下架对应的数值
      row.publishState = row.publishState === 1 ? 0 : 1
      // console.log(row.publishState)
      // 发送请求
      await choicePublish(row)
      // 信息提示
      this.$message.success(`${row.publishState === 1 ? '上架' : '下架'}成功`)
      // 重新渲染
      this.getList()
    },
    // 删除
    async delQuestion (row) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      // 删除接口
      await questionDel(row)
      // 提示
      this.$message.success('已删除成功')
      // 重新渲染
      if (this.tableData.length === 1 && this.requestParams.page > 1) {
        this.requestParams.page--
      }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
.btn_wrapper {
  margin-bottom: 15px;
  text-align: right;
}
.fs {
  font-size: 12px;
}
</style>
